<template>
  <div class="q-pa-md q-gutter-sm">
    <t-btn label="Carousel" color="primary" @click="carousel = true" />
    <t-btn label="Card" color="primary" @click="card = true" />
    <t-btn label="Sliders" color="primary" @click="sliders = true" />

    <t-dialog v-model="carousel">
      <t-carousel
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        v-model="slide"
        control-color="primary"
        navigation-icon="radio_button_unchecked"
        navigation
        padding
        height="200px"
        class="bg-white shadow-1 rounded-borders"
      >
        <t-carousel-slide :name="1" class="column no-wrap flex-center">
          <t-icon name="style" color="primary" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </t-carousel-slide>
        <t-carousel-slide :name="2" class="column no-wrap flex-center">
          <t-icon name="live_tv" color="primary" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </t-carousel-slide>
        <t-carousel-slide :name="3" class="column no-wrap flex-center">
          <t-icon name="layers" color="primary" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </t-carousel-slide>
        <t-carousel-slide :name="4" class="column no-wrap flex-center">
          <t-icon name="terrain" color="primary" size="56px" />
          <div class="q-mt-md text-center">
            {{ lorem }}
          </div>
        </t-carousel-slide>
      </t-carousel>
    </t-dialog>

    <t-dialog v-model="card">
      <t-card class="my-card">
        <t-img src="https://cdn.quasar.dev/img/chicken-salad.jpg" />

        <t-card-section>
          <t-btn
            fab
            color="primary"
            icon="place"
            class="absolute"
            style="top: 0; right: 12px; transform: translateY(-50%)"
          />

          <div class="row no-wrap items-center">
            <div class="col text-h6 ellipsis"> Cafe Basilico </div>
            <div
              class="col-auto text-grey text-caption q-pt-md row no-wrap items-center"
            >
              <t-icon name="place" />
              250 ft
            </div>
          </div>

          <t-rating v-model="stars" :max="5" size="32px" />
        </t-card-section>

        <t-card-section class="q-pt-none">
          <div class="text-subtitle1"> $・Italian, Cafe </div>
          <div class="text-caption text-grey">
            Small plates, salads & sandwiches in an intimate setting.
          </div>
        </t-card-section>

        <t-separator />

        <t-card-actions align="right">
          <t-btn v-close-popup flat color="primary" label="Reserve" />
          <t-btn v-close-popup flat color="primary" round icon="event" />
        </t-card-actions>
      </t-card>
    </t-dialog>

    <t-dialog v-model="sliders">
      <t-card style="width: 300px" class="q-px-sm q-pb-md">
        <t-card-section>
          <div class="text-h6">Volumes</div>
        </t-card-section>

        <t-item-label header>Media volume</t-item-label>
        <t-item dense>
          <t-item-section avatar>
            <t-icon name="volume_up" />
          </t-item-section>
          <t-item-section>
            <t-slider color="teal" v-model="slideVol" :step="0" />
          </t-item-section>
        </t-item>

        <t-item-label header>Alarm volume</t-item-label>
        <t-item dense>
          <t-item-section avatar>
            <t-icon name="alarm" />
          </t-item-section>
          <t-item-section>
            <t-slider color="teal" v-model="slideAlarm" :step="0" />
          </t-item-section>
        </t-item>

        <t-item-label header>Ring volume</t-item-label>
        <t-item dense>
          <t-item-section avatar>
            <t-icon name="vibration" />
          </t-item-section>
          <t-item-section>
            <t-slider color="teal" v-model="slideVibration" :step="0" />
          </t-item-section>
        </t-item>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        carousel: ref(false),
        card: ref(false),
        sliders: ref(false),

        slide: ref(1),
        lorem:
          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, ratione eum minus fuga, quasi dicta facilis corporis magnam, suscipit at quo nostrum!',

        stars: ref(3),

        slideVol: ref(39),
        slideAlarm: ref(56),
        slideVibration: ref(63),
      };
    },
  };
</script>
